<!--
 * @Author: Mr.Feng frz655379
 * @Date: 2023-11-10 23:28:24
 * @LastEditors: Mr.Feng frz655379
 * @LastEditTime: 2023-12-30 23:11:48
 * @FilePath: \interview\canvas特效\20231110\第一个canvas.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: Mr.Feng frz655379
 * @Date: 2023-11-10 23:28:24
 * @LastEditors: Mr.Feng frz655379
 * @LastEditTime: 2023-12-30 23:09:28
 * @FilePath: \interview\canvas特效\20231110\第一个canvas.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html> 
<html lang="en"> 
 <head> 
  <meta charset="UTF-8"> 
  <meta name="Generator" content="EditPlus®"> 
  <meta name="Author" content=""> 
  <meta name="Keywords" content=""> 
  <meta name="Description" content=""> 
  <title>canvas场景连线特效</title> 
  <style type="text/css"> 
 *{
    margin: 0px;
    padding: 0px; 
}
body{
    background-color: #f4f4f4;
}
  </style> 
 </head>
 <body> 
    <canvas  id="firstCanvas" style="width: 100vw;height: 100vh;"></canvas>
    <script type="text/javascript">
        const canvasBox=document.querySelector("#firstCanvas");//获取画布元素
        const ctx=canvasBox.getContext(contextType)
        ctx.setStrokeStyle("#000")
        ctx.fillRect(0,0,300,150)//绘制了一个起点坐标为（0,0）宽高分别为300px,150px的矩形
        ctx.moveTo(0, 0);//起始点
        ctx.bezierCurveTo(200, 200, 400, 400, 800, 800);//分别是第一个控制点的横纵坐标第二个控制点的横纵坐标和结束点的横纵坐标
        ctx.stroke();//实际绘制路径
    </script>
 </body> 
</html>